<template>
  <div class="default-main ba-table-box page">
    <!-- 按钮与搜索 -->
    <el-row class="page-button">
      <el-button type="primary" @click="saveReceipt()">新增回单</el-button>
      <el-button type="success" @click="loadTableData()">刷新</el-button>
      <el-input style="width: 20%; margin: 0 0 0 auto" v-model="searchText" placeholder="搜索" :suffix-icon="Search"
        @keyup.enter="handleSearch" clearable />
    </el-row>

    <!-- 表格 -->
    <el-table ref="multipleTableRef" :data="page.list" stripe border v-loading="tableLoading"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed type="index" label="序号" width="100" align="center" />
      <el-table-column show-overflow-tooltip prop="accountName" label="账号名称" align="center" />
      <el-table-column show-overflow-tooltip prop="oppAccountName" label="对方账号名称" align="center" />
      <el-table-column show-overflow-tooltip prop="flag" label="收付款标识" align="center">
        <template #default="scope">
          <span v-if="scope.row.flag === 'C'">收款</span>
          <span v-else>付款</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="tranDate" label="交易时间" align="center" />
      <el-table-column show-overflow-tooltip prop="status" label="交易状态" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0">处理中</el-tag>
          <el-tag v-else-if="scope.row.status === 1" class="ml-2" type="success">处理成功</el-tag>
          <el-tag v-else class="ml-2" type="danger">处理失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="money" label="交易金额（元）" align="right" />
      <el-table-column show-overflow-tooltip fixed="right" label="操作" align="center" width="100">
        <template #default="scope">
          <el-button width="100" link type="primary" size="small" @click="recharge(scope.row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination style="margin-top: 16px" v-model:current-page="page.current" v-model:page-size="page.limit"
      :page-sizes="[5, 10, 20, 50]" :small="small" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
      @current-change="onTableCurrentChange" />

    <!-- 查看明细详情 -->
    <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="查看详情" width="800px" @close="emptyData()">
      <el-form :inline="true" ref="formRef" :model="formData" label-width="120px" class="demo-dynamic">
        <el-form-item label="账号名称">
          <el-input v-model="formData.accountName" disabled></el-input>
        </el-form-item>
        <el-form-item label="对方账户名称">
          <el-input v-model="formData.oppAccountNo" disabled></el-input>
        </el-form-item>

        <el-form-item label="账号">
          <el-input v-model="formData.accountNo" disabled></el-input>
        </el-form-item>
        <el-form-item label="对方账号">
          <el-input v-model="formData.oppAccountName" disabled></el-input>
        </el-form-item>

        <el-form-item label="开户行名称">
          <el-input v-model="formData.bankName" disabled></el-input>
        </el-form-item>
        <el-form-item label="对方开户行名">
          <el-input v-model="formData.oppBankName" disabled></el-input>
        </el-form-item>

        <el-form-item label="开户行网点号">
          <el-input v-model="formData.bankNo" disabled></el-input>
        </el-form-item>
        <el-form-item label="对方开户行号">
          <el-input v-model="formData.oppBankNo" disabled></el-input>
        </el-form-item>
        <el-form-item label="交易类型">
          <el-input v-model="formData.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="余额">
          <el-input v-model="formData.balance" disabled></el-input>
        </el-form-item>
        <el-form-item label="交易金额(元)">
          <el-input v-model="formData.money" disabled></el-input>
        </el-form-item>
        <el-form-item label="附言">
          <el-input v-model="formData.postScript" disabled></el-input>
        </el-form-item>
        <el-form-item label="收付款标识">
          <el-input v-model="formData.flag" disabled></el-input>
        </el-form-item>
        <el-form-item label="摘要-备注">
          <el-input v-model="formData.summary" disabled></el-input>
        </el-form-item>
        <el-form-item label="用途">
          <el-input v-model="formData.useCn" disabled></el-input>
        </el-form-item>
        <el-form-item label="流水号">
          <el-input v-model="formData.serialNo" disabled></el-input>
        </el-form-item>
        <el-form-item label="批次流水号">
          <el-input v-model="formData.batchSerialNo" disabled></el-input>
        </el-form-item>
        <el-form-item label="交易状态">
          <el-input v-model="formData.status" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属银行">
          <el-input v-model="formData.bankCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="币种">
          <el-input v-model="formData.currency" disabled></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="emptyData()">关闭</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";

const multipleTableRef = ref()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dialogVisible = ref(false);
const tableLoading = ref(false);
const searchText = ref("");
const page = reactive({
  current: 1,
  limit: 20,
  total: 0,
  list: [],
});


const formData = reactive({
  id: "",
  accountName: "",
  cardId: "",
  openBankName: "",
  status: "",
  bankCode: "",
  currency: "",
  money: "",
  oppBankNo: "",
  flag: "",
  batchSerialNo: "",
  serialNo: "",
  useCn: "",
  summary: "",
  balance: "",
  postScript: "",
  oppBankName: "",
  oppAccountName: "",
  oppAccountNo: "",
  bankNo: "",
  bankName: "",
  accountNo: "",
  type: ""
});

// 搜索
const handleSearch = (e) => {
  e.target.blur();
  loadTableData();
};

// 修改分页
const onTableCurrentChange = (val) => {
  page.current = val;
  loadTableData();
};
const handleSizeChange = (val) => {
  page.limit = val;
  page.current = 1;
  loadTableData();
}
// 查询表格数据
const loadTableData = () => {
  tableLoading.value = true;

  request({
    url: "/detail/list",
    method: "post",
    data: {
      "pageNumber": page.current,
      "pageSize": page.limit,
      "query": searchText.value
    }
  }).then((res) => {
    if (res.status === 200) {
      let data = res.data;
      page.current = data.page;
      page.total = data.total;
      page.list = data.list;
    }
  }).finally(() => {
    tableLoading.value = false;
  });

};

// 查看详细信息
const recharge = (row) => {
  dialogVisible.value = true;
  formData.accountName = row.accountName;
  formData.cardId = row.cardId;
  formData.openBankName = row.openBankName;
  formData.bankCode = row.bankCode;
  formData.currency = row.currency;
  formData.money = row.money;
  formData.oppBankNo = row.oppBankNo;
  formData.flag = row.flag === 'C' ? "收款" : "付款";
  formData.batchSerialNo = row.batchSerialNo;
  formData.serialNo = row.serialNo;
  formData.useCn = row.useCn;
  formData.summary = row.summary;
  formData.balance = row.balance;
  formData.postScript = row.postScript;
  formData.oppBankName = row.oppBankName;
  formData.oppAccountName = row.oppAccountName;
  formData.oppAccountNo = row.oppAccountNo;
  formData.bankNo = row.bankNo;
  formData.bankName = row.bankName;
  formData.accountNo = row.accountNo;
  if (row.type === 3) {
    formData.type = '转账';
  } else if (row.type === 2) {
    formData.type = '取款';
  } else if (row.type === 1) {
    formData.type = '存款';
  } else {
    formData.type = '其他类型';
  }

  if (row.status === 0) {
    formData.status = '等待';
  } else if (row.status === 1) {
    formData.status = '处理成功';
  } else if (row.status === 2) {
    formData.status = '交易失败';
  } else {
    formData.status = '其他类型';
  }
}

// 清楚form表单数据
const emptyData = () => {
  dialogVisible.value = false;
  formData.accountName = "";
  formData.cardId = "";
  formData.openBankName = "";
  formData.status = "";
  formData.bankCode = "";
  formData.currency = "";
  formData.money = "";
  formData.oppBankNo = "";
  formData.flag = "";
  formData.batchSerialNo = "";
  formData.serialNo = "";
  formData.useCn = "";
  formData.summary = "";
  formData.balance = "";
  formData.postScript = "";
  formData.oppBankName = "";
  formData.oppAccountName = "";
  formData.oppAccountNo = "";
  formData.bankNo = "";
  formData.bankName = "";
  formData.accountNo = "";
  formData.id = "";
}

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
}
// 添加回单
const saveReceipt = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage({
      message: '请选择明细后，在新增回单',
      type: 'error',
    })
    return
  }
  let id = multipleSelection.value.map(v => v.id)

  request({
    url: "/detail/receipt",
    method: "post",
    data: id
  }).then((res) => {
    if (res.status === 200) {
      ElMessage({
        message: '任务请求成功.',
        type: 'success',
      })
      multipleTableRef.value.clearSelection()
    }
  })
}


// 页面挂载
onMounted(() => {
  loadTableData();

});
</script>
<style scoped>
.page {
  width: calc(100% - var(--ba-main-space) - var(--ba-main-space));
  padding: 16px;
  background: #ffffff;
}

.page-button {
  padding: 0 16px 16px 0;
}
</style>
  